<title>qrMenu</title>
<link rel="shortcut icon" href="http://localhost/qrmenu/trunk/assets/themes/default/images/favicon.ico" />
<link rel="stylesheet" href="http://localhost/qrmenu/trunk/assets/themes/default/css/style.css">

<style>

/*=========================================
	Main Styles
=========================================*/
.container {
	width: 100%;
	margin: 0 auto;
}
.clear {
	clear: both;
}

/*=========================================
	Main Container for all
=========================================*/
.onepcssgrid-1000, .onepcssgrid-1200 , .onepcssgrid-100{
	margin: 0 auto;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1220px;
}

.onepcssgrid-1000 {
	max-width: 1020px;
}

.onepcssgrid-100 {
	max-width: 100%;
}

.onerow {
	clear: both;
}

/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
	margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
}

/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {
	.onerow {
	}

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		float: none;
		width: 99%;
	}
}

body {
    margin: 0;
    padding: 0;
/*     background-color: #FAFAFA; */
    font: 12pt "Tahoma";
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
/*     border: 1px #D3D3D3 solid; */
/*     border-radius: 5px; */
/*     background: white; */
/*     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
}
.subpage {
    padding: 1cm;
/*     border: 5px red solid; */
    height: 256mm;
/*     outline: 2cm #FFEAEA solid; */
}

@page {
    size: A4 landscape;
    margin: 0;
    
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

</style>


<div class="onepcssgrid-100">
<div class="onerow">
	
        <?php $i = 0; $q = 11; foreach ($dae as $img) {
			$i++;
			$q++;
			if (($i % 3 == 0 || $i % 3 == 1) && $i != 0) { $last = 'last'; } else { $last = '';}	
		?>
	
		<?php if ($q == 12) { ?>
			<div class="book">
   			<div class="page">
	        	<div class="subpage">
		<?php $q = 0; } ?>
	
		<div class="col4 <?=$last?>">
			<p>Mesa: <?=$img['cod_mesa']?><p><img alt="Img" width="160" height="160" src="<?=base_url() . FILES . $img['qrcode_imagem_mesa']?>">
		</div>
		
		<?php if ($q == 11) { ?>
        	</div>    
   			</div>
		</div>
		<?php $q = 11;  } ?>
		
	<?php } ?>
        	
        	
	
</div>
</div>



